<template>
    <div>
        <el-row :gutter="20" class="nav">
            <el-col :offset="14" :span="3" class="login">
                <span v-if="$store.state.name">欢迎{{this.$store.state.name}}</span>
                <span v-else @click="login = true">登录</span>
                <button @click="remove">退出登录</button>
            </el-col>
            <el-col :span="7">
                <el-menu default-active="1" class="el-menu-demo" mode="horizontal" background-color="#545c64"
                    text-color="#fff" active-text-color="#ffd04b" router>
                    <el-menu-item index="1">我的订单</el-menu-item>
                    <el-menu-item index="/shoplike">我的收藏</el-menu-item>
                    <el-menu-item index="/shopcar">我的购物车</el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
        <div class="content">
            <el-menu default-active="1" class="el-menu-demo" mode="horizontal" router>
                <el-menu-item index="/home">首页</el-menu-item>
                <el-menu-item index="/shoplist">全部商品</el-menu-item>
                <el-menu-item index="6">关于我们</el-menu-item>
            </el-menu>
        
        <div>
            <router-view></router-view>
        </div>
        </div>
        <el-dialog title="登录" :visible.sync="login">
            <el-form :model="form">
                <el-form-item label="用户名">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="login = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                login: false,
                form: {
                    name: "",
                    password: "",
                },
            };
        },
        methods: {
            submit(){
                this.login = false;
                this.$axios
                .post("/users/login", {
                    userName: this.form.name,
                    password: this.form.password,
                })
                .then((res) =>{
                    console.log(res);
                    if(res.data.code == "001") {
                        this.$store.commit("setuser", this.form.name);
                        this.login = false;
                    };
                });
            },
          remove(){
              this.$store.commit("remove");
          }  
        },
    };
</script>

<style lang='scss'>
    .nav {
        background-color: #545c64;
    }

    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        height: 65px;
    }

    button {
        color: #000;
    }

    .content {
        width: 1200px;
        margin: 0 auto;
        border-bottom: 1px solid #ccc;
    }
</style>